<template>
  <div class="edit-user-id">
    <van-overlay :show="editInfo.show">
      <div class="wrapper" @click="closeEdituserId">
        <div class="edit-userid-container">
          <van-radio-group v-model="editInfo.radio">
            <van-radio :name="item.is_check" class="user-id" 
              v-for="(item,index) in editInfo.editInfoData"
              :key="index"
              @click="editUserIdRadio(item)"
            >{{item.email}}</van-radio>
          </van-radio-group>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Vue from 'vue'
import { editUsers } from '@/api/user/member/memberApi'
import { Overlay, RadioGroup, Radio } from 'vant'
Vue.use(Overlay)
Vue.use(RadioGroup)
Vue.use(Radio)
import Store from '@/utils/store'
export default Vue.extend({
  props: {
    editInfo: {
      type: Object,
      default: {
        show: true
      }
    }
  },
  data() {
    return {
    }
  },

  methods: {
    // 关闭遮罩层
    closeEdituserId() {
      this.editInfo.show = false
    },
    editUserIdRadio(item) {
      const user_id = item.user_id
      editUsers({ user_id }).then(res => {
        if (res.status) {
          Store.saveLocal('uid', user_id)
          this.$emit('RefreshPage', res.url)
        } else {
          this.$Error('切换失败')
        }
      })
    }
  }
})
</script>

<style lang='scss'>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .edit-userid-container {
    width: 400px;
    background-color: #fff;
    padding: 20px;
    .user-id {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
</style>
